<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素删除和插入操作</title>
		<!-- 元素删除和插入操作：针对 元素 增删改
		 append()       功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()      功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()        功能：在匹配元素集合中所有的外部后边插入内容
		 before()       功能：在匹配元素集合中所有的外部后边插入内容
		 
		 remove()       功能：使用前提:元素内容，删除元素
		 empty()        功能：使用前提:元素内容，清空元素
		 
		 replaceWith()
		 
		 -->
	<style>
		button{
			margin: 5px;
			padding: 8px 15px;
			cursor: pointer;
			
		}
		body{
			margin: 20px;
		}
		#target{
			border: 1px solid #000;
			border-radius: 5px;
			padding: 10px;
			margin-top: 10px;
		}
	</style>	 
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	
	<body>
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBth">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落~~</p>
		</div>
		<!-- 2.替换和插入的元素块区域 -->
		<div id="newElement" style="display: none;">
			<p>这是插入和替换的元素块段落~~</p>
		</div>
		<!-- css    button添加样式：外边距5px 内边距8px 15px    手指
		            body添加样式：外边距20px
					target添加样式1px border     基础倒角   内边距10px
					            margin-top：10px
					-->
		<script>
			/* 1.点击 内部末尾插入 按钮  实现 选框内末尾插入新元素 */
			$("#appendBtn").click(function(){
				//插入新增元素---1.1创建一个新元素--复制一个新元素  clone()
				//根据抓到元素---复制出新元素---包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性---显示 display:block;
				nw.css("display","block");
				//1.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			/* 2.点击 内部开头插入 按钮  实现 选框内末尾插入新元素 */
			$("#prependBth").click(function(){
				//插入新增元素---2.1创建一个新元素--复制一个新元素  clone()
				//根据抓到元素---复制出新元素---包含原有属性和样式
				var nb=$("#newElement").clone();
				//2.2复制div加p空间元素，含原有属性---显示 display:block;
				nb.css("display","block");
				//2.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").prepend(nb);
			});
			/* 3.点击 内部开头插入 按钮  实现 选框外后面插入新元素 */
			$("#afterBtn").click(function(){
				var na=$("#newElement").clone();
				na.css("display","block");
				$("#target").after(na);
				
			});
			
			$("#beforeBtn").click(function(){
				var np=$("#newElement").clone();
				np.css({"display":"block",
				         "width":"200px",
						 "height":"200px",
						 "background":"#e4393c",
						 "color":"transparent",
						 "border-radius":"50%"
				});
				$("#target").before(np);
			});
		/* 5 点击  删除和清空元素  按钮  真实删除元素,清空元素操作 */
		$("#removeBtn").click(function(){
			$("#target").remove();
		});
		/* 6. */
		$("#emptyBtn").click(function(){
			$("#target").empty();
		});
		/* 7. */
		$("#replaceWithBtn").click(function(){
			//克隆  新元素效果
			var c=$("#newElement").clone().css("display","block");
			$("#target").replaceWith(c);
		});
		</script>
	</body>
</html>